<template>
	<view class="indexContent">
		<!-- 头部 -->
		<view class="header">
			<image src="../../static/images/logo.png"></image>
			<view class="serchInput">
				<i class="iconfont icon-sousuo"></i>
				<input type="text"  placeholder="搜索商品" placeholder-class="placeholder"/>
			</view>
			<button>登录</button>
		</view>
		<!-- 导航 -->
		<scroll-view class="navScroll" scroll-x="true" enable-flex  v-if="kingKongList.length" >
			<view class="scrollItem " :class="{active:navId===-1 }" @click="navId=-1">推荐</view>
			<view class="scrollItem" v-for="(kingKongItem,index) in kingKongList" :key="L1Id" @click="changeNavId(changeNavId)" >{{kingKongItem.text}}</view>
		</scroll-view>
		<!-- 轮播图哪些东西 -->
		<scroll-view scroll-y="true">
			<!-- 推荐菜单所显示的对应的内容 -->
			<recommend />
		</scroll-view>
	</view>
</template>

<script>
	import { mapState,mapGetters,mapActions } from "vuex"
	import recommend from "../../components/recommend/recommend.vue"
	export default {
		data() {
			return {
				navId:-1
			}
		},
		components:{
			recommend
		},
		mounted(){
			this.getIndexData()
		},
		methods:{
			...mapActions(["getIndexData"]),
			changeNavId(id){
				
			}
		},
		computed:{
			...mapState({
				initData:state=>state.indexData.indexData
			}),
			...mapGetters(["kingKongList"])
		}
		
	}
</script>

<style lang="stylus" scoped>
.indexContent
	.header
		display flex
		padding 10upx 0
		image
			width 140upx
			height 40upx
			margin 10upx 20upx
		.serchInput
			height 60upx
			background-color #eee
			position relative
			input
				height 60upx
				margin-left 50upx
			.iconfont
					font-size 30upx
					position absolute
					left 10upx
					top 25%
			.placeholder
					font-size 30upx
					line-height 60upx
					text-align center
		button
			width 144upx
			height 60upx
			font-size 24upx
			line-height 60upx
			text-align center
			color #b4282b
			margin 0 20upx
	.navScroll
		width 100%
		display flex
		white-space nowrap
		height 80upx
		.scrollItem
			width 200upx
			height 100%
			display inline-block
			margin 0 20upx
			padding 0 20upx
			line-height 80upx
			text-align center
			box-sizing border-box
			font-size 28upx
			$.active
				border-bottom 1upx solid #B4282B
</style>
